<!doctype html>
<html lang="zh-CN">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>调用摄像头拍照demo</title>
	<style type="text/css">
		body { font-family: Helvetica, sans-serif; }
		h2, h3 { margin-top:0; }
		form { margin-top: 15px; }
		form > input { margin-right: 15px; }
		#results { float:right; margin:20px; padding:20px; border:1px solid; background:#ccc; }
	</style>
</head>
<body>
	<div id="results">这里是拍的照片</div>
	
	<h1>WebcamJS 测试页面</h1>
	<h3>320x240像素演示</h3>
	
	<div id="my_camera"></div>
	<script type="text/javascript" src="webcam.min.js"></script>
	<script language="JavaScript">
		Webcam.set({  //参数设置:jpeg_quality-质量,image_format-类型
			width: 1024,
			height: 768,
			image_format: 'jpeg',
			jpeg_quality: 90   
		});
		Webcam.attach( '#my_camera' );
	</script>
	<form>
		<input type=button value="点击拍照" onClick="take_snapshot()">
	</form>
	<script language="JavaScript">
		function take_snapshot() {  //snap-拍照
			Webcam.snap( function(base64) {  //拍照回调
				// 拍照结果渲染base64
				document.getElementById('results').innerHTML = 
					'<h2>这是你的照片:</h2>' + 
					'<img src="'+base64+'"/>';
			} );
		}
	</script>
</body>
</html>
